<template>
  <div class="body">
    <section class="project-top">
      <div class="center-block">
        <div class="Crumbs clearfix">
          您的位置：
          <router-link to="/">首页<b>&gt;</b></router-link>
          <router-link to="/dataService">数据服务<b>&gt;</b></router-link>
          <a href="javascript:;">项目查询</a>
        </div>
        <div class="data-searchBox">
          <div class="indexSearchBox">
            <div class="input-group">
              <span class="input-group-btn"><i class="inSearchFdj dtFont dtFont-sousuo"></i></span>
              <input type="text" v-model="query.value" placeholder="请输入您要查询的事项"
                     class="form-control inputSearch">
              <span class="input-group-btn">
						    <button @click="search" class="btn btn-default btnSearch" type="button">搜索</button>
					    </span>
            </div>
          </div>

          <div class="data-Ctrl">
            <h3 class="circular-title">筛选</h3>
            <div class="d-inputCtrl" @click="open=!open">
              <span>{{open?'收起':'展开'}}<i :class="open?'dtFont dtFont-shangla':'dtFont dtFont-xiala'"></i></span>
            </div>
          </div>

          <el-collapse-transition>
            <ul v-show="open" class="data-searchBoxSelcect">
              <li>
                <div>资质类别</div>
                <section class="aptType blockSelect">
                  <span v-for="(item,index) in aptType"
                        :key="index"
                        :class="{active:item.aptNum==query.aptNum}"
                        @click="aptTab(item.aptNum)">{{item.aptName}}</span>
                </section>
              </li>
              <li>
                <div>资质类别</div>
                <section class="aptType blockSelect">
                   <span v-for="(item,index) in nativePlace"
                         :key="index"
                         :class="{active:item.npNum==query.npNum}"
                         @click="npTab(item.npNum)">{{item.npName}}</span>
                </section>
              </li>
              <li>
                <div>资质类别</div>
                <section class="aptType blockSelect">
                   <span v-for="(item,index) in serType"
                         :key="index"
                         :class="{active:item.serNum==query.serNum}"
                         @click="serTab(item.serNum)">{{item.serName}}</span>
                </section>
              </li>
            </ul>
          </el-collapse-transition>
        </div>
      </div>
    </section>

    <section class="project-list">
      <div class="center-block">
        <div class="project-total">
          <p>查询结果：共<span>{{tableData.total}}</span>条</p>
        </div>
        <div class="project-tableBox">
          <el-table :data="tableData.list" style="width: 100%" class="data-table text-right">
            <el-table-column type="index" label="序号" width="65"></el-table-column>
            <el-table-column prop="" label="项目名称" width="380">
              <template slot-scope="scope">
                <div class="text-left">
                  <router-link :to="`/dataService/project/detail?id=${scope.row.QY_ID}`">
                    <span class="link">{{scope.row.compName}}</span>
                    <div class="bas-tableCon">
                      <font>项目编号：1101121504020101</font>
                    </div>
                  </router-link>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="regionFullname" label="所在地区" width="220"></el-table-column>
            <el-table-column prop="" label="资格类别" width="140">
              <template slot-scope="scope">
                <div class="NatureTag">政府投资</div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="工程类别" width="130">
              <template slot-scope="scope">
                房屋建筑工程
              </template>
            </el-table-column>
            <el-table-column prop="" label="建设单位">
              <template slot-scope="scope">
                安徽德拓信息科技有限公司
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block" style="padding: 20px 0">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pg"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="query.pgsz"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total">
          </el-pagination>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import {getComList} from '@/api/dataService/index';
  export default {
    name: "project",
    data() {
      return {
        open: true,
        aptType: [
          {aptName: "不限", aptNum: ""},
          {aptName: "政府类投资", aptNum: "250100"},
          {aptName: "社会投资类", aptNum: "250200"}
        ],
        nativePlace: [
          {npName: "不限", npNum: ""},
          {npName: "房屋建筑工程", npNum: "260100"},
          {npName: "市政工程", npNum: "260200"},
          {npName: "水利工程", npNum: "260300"},
          {npName: "公路工程", npNum: "260400"},
        ],
        serType: [
          {serName: "不限", serNum: ""},
          {serName: "江西省", serNum: "270100"},
          {serName: "南昌", serNum: "270200"},
          {serName: "九江", serNum: "270300"},
          {serName: "上饶", serNum: "270400"},
          {serName: "景德镇", serNum: "270500"},
          {serName: "抚州", serNum: "270600"},
          {serName: "宜春", serNum: "270700"},
          {serName: "吉安", serNum: "270800"},
          {serName: "赣州", serNum: "270900"},
          {serName: "萍乡", serNum: "271000"},
          {serName: "新余", serNum: "271100"},
          {serName: "鹰潭", serNum: "271200"},
        ],
        tableData: {
          list: [],
          total: 0
        },
        query: {
          pgsz: 20,
          pg: 1,
          value: '',
          aptNum: '',
          npNum: '',
          serNum: '',
        }
      }
    },
    mounted() {
      this.getComList();
    },
    methods: {
      search() {
        this.getComList();
      },
      aptTab(value) {
        this.query.aptNum = value;
        this.getComList();
      },
      npTab(value) {
        this.query.npNum = value;
        this.getComList();
      },
      serTab(value) {
        this.query.serNum = value;
        this.getComList();
      },
      handleSizeChange(val) {
        this.query.pgsz = val;
        this.getComList()
      },
      handleCurrentChange(val) {
        this.query.pg = val;
        this.getComList();
      },
      getComList(data) {
        let {pg, pgsz, value, aptNum,npNum,serNum} = this.query;
        data = {pg, pgsz, value, aptNum,npNum,serNum};
        getComList(data).then(res => {
          this.tableData.list = res.rows;
          this.tableData.total = res.total;
          //console.log(res);
        })
      }
    }
  }
</script>
